<template>
  <div class="dashboard-container">
    <el-row>
      <el-col :span="6">
        <Card title="固定资产" :total="assetGdTotal" clazz="purple" unit="项" icon="device" />
      </el-col>
      <el-col :span="6">
        <Card title="固定资产总价值" :total="assetGdMoney" clazz="darkgreen" unit="万元" icon="asset" />
      </el-col>
      <el-col :span="6">
        <Card title="低值易耗品" :total="assetDzyhpTotal" clazz="purple" unit="项" icon="device" />
      </el-col>
      <el-col :span="6">
        <Card title="低值易耗品总价值" :total="assetDzyhpMoney" clazz="darkgreen" unit="万元" icon="asset" />
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-card class="mixed">
          <div style="width: 50%;">
            <div class="title">实物资产分布</div>
            <bar-chart :style="{width: '100%', height: '100%' }" :config="assetBarConfig" :is-click="isClickState" @seriesClick="detailClick" />
          </div>
          <div style="width: 50%">
            <el-table :data="statsByMiddleTypeAndStatusData" border style="width: 100%" size="mini" height="320">
              <el-table-column prop="bigTypeName" header-align="center" align="center" label="一级分类" />
              <el-table-column prop="middleTypeName" header-align="center" align="center" label="二级分类" />
              <el-table-column prop="count" header-align="center" align="center" label="数量" width="50" />
              <el-table-column prop="amount" header-align="center" align="center" label="金额(万)" width="70" />
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="mixed">
          <div style="width: 50%;">
            <div class="title">部门实物资产</div>
            <bar-chart :style="{width: '100%', height: '100%' }" :config="depBarConfig" :is-click="isClickState" @seriesClick="detailClick" />
          </div>
          <div style="width: 50%">
            <el-table :data="assetStatsByOgAndCategoriesTableData" border style="width: 100%" size="mini" height="320">
              <el-table-column prop="name" header-align="center" align="center" label="部门" />
              <el-table-column prop="count" header-align="center" align="center" label="总数" width="50" />
              <el-table-column prop="gdCount" header-align="center" align="center" label="固定资产" width="70" />
              <el-table-column prop="dzyhCount" header-align="center" align="center" label="低值易耗" width="70" />
              <el-table-column prop="kxpCount" header-align="center" align="center" label="消耗品" width="60" />
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-card class="mixed">
          <div style="width: 50%;">
            <div class="title">个人实物资产</div>
            <bar-chart :style="{width: '100%', height: '100%' }" :config="userBarConfig" :is-click="isClickState" @seriesClick="detailClick" />
          </div>
          <div style="width: 50%">
            <el-table :data="assetStatsByUserAndCategoriesTableData" border style="width: 100%" size="mini" height="320">
              <el-table-column prop="name" header-align="center" align="center" label="人员" />
              <el-table-column prop="count" header-align="center" align="center" label="总数" />
              <el-table-column prop="gdCount" header-align="center" align="center" label="固定资产" />
              <el-table-column prop="dzyhCount" header-align="center" align="center" label="低值易耗" />
              <el-table-column prop="kxpCount" header-align="center" align="center" label="消耗品" />
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="mixed">
          <div style="width: 50%;">
            <div class="title">实物资产盘点</div>
            <bar-chart :style="{width: '100%', height: '100%' }" :config="invBarConfig" :is-click="isClickState" @seriesClick="detailClick" />
          </div>
          <div style="width: 50%">
            <el-table :data="inventoryAssetData" border style="width: 100%" size="mini" height="320">
              <el-table-column prop="start_time" header-align="center" align="center" label="盘点时间" />
              <el-table-column prop="department_name" header-align="center" align="center" label="盘点计划" />
              <el-table-column prop="asset_count" header-align="center" align="center" label="资产总数" width="70" />
              <el-table-column prop="principal" header-align="center" align="center" label="责任人" width="60" />
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import ScollView from './components/ScollView.vue'
import Card from './components/Card.vue'
import belongs from '@neu/dcam-ui/mixins/belongs'
import { assetTotalStats, assetMoneyStats, statsByBigTypeAndStatus, statsByMiddleTypeAndStatus, statsByOgAndCategories, statsByUserAndCategories } from '@neu/dcam-ui/api/fixedAsset'
import BarChart from '@neu/biz-core/components/Charts/BarChart'
import { inventoryStats as list } from '@neu/dcam-ui/api/assetStats'

export default {
  name: 'Dashboard',
  components: {
    Card,
    // ScollView,
    BarChart
  },
  mixins: [belongs],
  data() {
    return {
      // card
      // 固定资产
      assetGdTotal: 0,
      assetGdMoney: 0,
      // 低值易耗品
      assetDzyhpTotal: 0,
      assetDzyhpMoney: 0,
      // 快销品
      assetKxpTotal: 0,
      assetKxpMoney: 0,
      // 实物资产分布
      assetBarConfig: {
        type: 'bar',
        title: '',
        dataSource: [],
        colors: ['#55abb5', '#d2e0e5', '#f8b3bd'],
        legendStatus: true,
        topValueStatus: true,
        isXShowState: true,
        animation: false,
        formatter: {
          tooltip: function(params) {
            let res = '<div style="margin-bottom:5px;padding:0 12px;width:100%;height:24px;line-height:24px;border-radius:3px;"><p>' + params[0].name + '</p></div>'
            for (let i = 0; i < params.length; i++) {
              let sum = params[i].data.slice(1).reduce((sum, item) => { return sum + Number(item) }, 0)
              sum = sum === 0 ? 1 : sum
              res += `<div style="color: #fff;font-size: 14px; padding:0 12px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:2px;width:10px;height:10px;background-color:${[params[i].color]};"></span>
                ${params[i].seriesName}
                ${params[i].data[params[i].seriesIndex + 1]}
                (${(params[i].data[params[i].seriesIndex + 1] * 100 / sum).toFixed(1) + '%'})
              </div>`
            }
            return res
          }
        }
      },
      statsByMiddleTypeAndStatusData: [],
      // 部门资产分布
      depBarConfig: {
        type: 'bar',
        title: '',
        dataSource: [],
        colors: ['#7783c6', '#acd3f3', '#efe0b6'],
        legendStatus: true,
        topValueStatus: true,
        isXShowState: true,
        animation: false,
        formatter: {
          tooltip: function(params) {
            let res = '<div style="margin-bottom:5px;padding:0 12px;width:100%;height:24px;line-height:24px;border-radius:3px;"><p>' + params[0].name + '</p></div>'
            for (let i = 0; i < params.length; i++) {
              let sum = params[i].data.slice(1).reduce((sum, item) => { return sum + Number(item) }, 0)
              sum = sum === 0 ? 1 : sum
              res += `<div style="color: #fff;font-size: 14px; padding:0 12px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:2px;width:10px;height:10px;background-color:${[params[i].color]};"></span>
                ${params[i].seriesName}
                ${params[i].data[params[i].seriesIndex + 1]}
                (${(params[i].data[params[i].seriesIndex + 1] * 100 / sum).toFixed(1) + '%'})
              </div>`
            }
            return res
          }
        }
      },
      assetStatsByOgAndCategoriesTableData: [],
      // 个人资产分布
      userBarConfig: {
        type: 'bar',
        title: '',
        dataSource: [],
        colors: ['#6eb2e5', '#f8ab84', '#e2c5dd'],
        legendStatus: true,
        topValueStatus: true,
        isXShowState: true,
        scroll: true,
        animation: false,
        formatter: {
          tooltip: function(params) {
            let res = '<div style="margin-bottom:5px;padding:0 12px;width:100%;height:24px;line-height:24px;border-radius:3px;"><p>' + params[0].name + '</p></div>'
            for (let i = 0; i < params.length; i++) {
              let sum = params[i].data.slice(1).reduce((sum, item) => { return sum + Number(item) }, 0)
              sum = sum === 0 ? 1 : sum
              res += `<div style="color: #fff;font-size: 14px; padding:0 12px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:2px;width:10px;height:10px;background-color:${[params[i].color]};"></span>
                ${params[i].seriesName}
                ${params[i].data[params[i].seriesIndex + 1]}
                (${(params[i].data[params[i].seriesIndex + 1] * 100 / sum).toFixed(1) + '%'})
              </div>`
            }
            return res
          }
        }
      },
      assetStatsByUserAndCategoriesTableData: [],
      // 资产盘点分布
      invBarConfig: {
        type: 'bar',
        title: '',
        dataSource: [],
        colors: ['#71d1bf', '#f7d57f', '#9ed4ef'],
        legendStatus: true,
        topValueStatus: true,
        isXShowState: true,
        animation: false,
        formatter: {
          tooltip: function(params) {
            let res = '<div style="margin-bottom:5px;padding:0 12px;width:100%;height:24px;line-height:24px;border-radius:3px;"><p>' + params[0].name + '</p></div>'
            for (let i = 0; i < params.length; i++) {
              let sum = params[i].data.slice(1).reduce((sum, item) => { return sum + Number(item) }, 0)
              sum = sum === 0 ? 1 : sum
              res += `<div style="color: #fff;font-size: 14px; padding:0 12px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:2px;width:10px;height:10px;background-color:${[params[i].color]};"></span>
                ${params[i].seriesName}
                ${params[i].data[params[i].seriesIndex + 1]}
                (${(params[i].data[params[i].seriesIndex + 1] * 100 / sum).toFixed(1) + '%'})
              </div>`
            }
            return res
          }
        }
      },
      inventoryAssetData: [],
      // bar点击事件
      isClickState: true,
      // 定时器
      timer: null
    }
  },
  created() {
    // 卡片数据计算
    this.getAssetGdCard()
    this.getAssetDzyhpCard()
    this.getAssetKxpCard()
    // this.getAssetsTotal()
    // 实物资产分布
    // statsByBigTypeAndStatus(this.belongs).then(res => {
    //   this.assetBarConfig.dataSource = res
    // })
    // statsByMiddleTypeAndStatus(this.belongs).then(res => {
    //   this.statsByMiddleTypeAndStatusData = res.data
    // })
    this.getAssetBarData()
    this.getDepBarData()
    this.getUserBarData()
    this.getInvBarData()
  },
  mounted() {
    this.timer = setInterval(() => {
      // 实物资产
      if (this.assetBarConfig.dataSource.length > 5) {
        this.assetBarConfig.dataSource = [this.assetBarConfig.dataSource[0], ...this.assetBarConfig.dataSource.slice(2)]
      } else {
        this.assetBarConfig.dataSource = []
        this.getAssetBarData()
      }
      // 部门资产
      if (this.depBarConfig.dataSource.length > 5) {
        this.depBarConfig.dataSource = [this.depBarConfig.dataSource[0], ...this.depBarConfig.dataSource.slice(2)]
      } else {
        this.depBarConfig.dataSource = []
        this.getDepBarData()
      }
      // 个人资产分布
      if (this.userBarConfig.dataSource.length > 5) {
        this.userBarConfig.dataSource = [this.userBarConfig.dataSource[0], ...this.userBarConfig.dataSource.slice(2)]
      } else {
        this.userBarConfig.dataSource = []
        this.getUserBarData()
      }
      // 资产盘点分布
      if (this.invBarConfig.dataSource.length > 5) {
        this.invBarConfig.dataSource = [this.invBarConfig.dataSource[0], ...this.invBarConfig.dataSource.slice(2)]
      } else {
        this.invBarConfig.dataSource = []
        this.getInvBarData()
      }
    }, 4000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    // 卡片数据
    getAssetGdCard() {
      const params = {
        s_belongs: this.belongs,
        s_categories: '1'
      }
      // 固定资产
      assetTotalStats(params).then(res => {
        this.assetGdTotal = res.data ? res.data : 0
      })
      assetMoneyStats(params).then(res => {
        this.assetGdMoney = Math.round((res.data ? res.data : 0) / 10000 * 100) / 100
      })
    },
    getAssetDzyhpCard() {
      // 低值易耗品
      const params = {
        s_belongs: this.belongs,
        s_categories: '2'
      }
      assetTotalStats(params).then(res => {
        this.assetDzyhpTotal = res.data ? res.data : 0
      })
      assetMoneyStats(params).then(res => {
        this.assetDzyhpMoney = Math.round((res.data ? res.data : 0) / 10000 * 100) / 100
      })
    },
    getAssetKxpCard() {
      // 快销品
      const params = {
        s_belongs: this.belongs,
        s_categories: '3'
      }
      assetTotalStats(params).then(res => {
        this.assetKxpTotal = res.data ? res.data : 0
      })
      assetMoneyStats(params).then(res => {
        this.assetKxpMoney = Math.round((res.data ? res.data : 0) / 10000 * 100) / 100
      })
    },
    // 实物资产分布
    getAssetBarData() {
      statsByBigTypeAndStatus(this.belongs).then(res => {
        this.assetBarConfig.dataSource = res
      })
      statsByMiddleTypeAndStatus(this.belongs).then(res => {
        this.statsByMiddleTypeAndStatusData = res.data
      })
    },
    // 部门资产分布
    getDepBarData() {
      statsByOgAndCategories(this.belongs).then(res => {
        const data = res.data
        this.depBarConfig.dataSource = data.echarsData
        this.assetStatsByOgAndCategoriesTableData = data.tableData
      })
    },
    // 个人资产分布
    getUserBarData() {
      statsByUserAndCategories(this.belongs).then(res => {
        const data = res.data
        this.userBarConfig.dataSource = data.echarsData
        this.assetStatsByUserAndCategoriesTableData = data.tableData
      })
    },
    // 资产盘点分布
    getInvBarData() {
      list().then(res => {
        const data = res.data
        this.inventoryAssetData = data
        const dataSource = []
        dataSource.push(['盘点时间', '盘平', '盘亏', '盘盈'])
        data.forEach(e => {
          dataSource.push([e.department_name, String(e.equality_count), String(e.loss_count), String(e.gain_count)])
        })
        this.invBarConfig.dataSource = dataSource
      })
    },
    // 跳转详情
    detailClick(param) {
      const name = param.name
      const componentIndex = param.componentIndex
      if (name === '资产状态' || name === '部门实物资产') {
        if (componentIndex === 0) {
          this.$router.push({ name: 'dcam_gdreport', query: { categories: 1 }})
        } else if (componentIndex === 1) {
          this.$router.push({ name: 'dcam_dzyhpreport', query: { categories: 2 }})
        } else {
          this.$router.push({ name: 'dcam_xhpreport', query: { categories: 3 }})
        }
      } else if (name === '个人实物资产') {
        this.$router.push({ name: 'dcam_personalreport', query: { categories: 3 }})
      } else {
        this.$router.push({ name: 'dcam_inventoryreport', query: { categories: 3 }})
      }
    }
  }
}
</script>

<style lang="scss">
  .mixed {
    .el-card__body {
      display: flex;
      flex-direction: row;
    }
  }
  .title {
    font-size: 18px;
    font-weight: bold;
  }
  .animate {
    padding-left: 20px;
    font-size: 12px;
    color: #000;
    display: inline-block;
    white-space: nowrap;
    animation: 3s wordsLoop linear infinite normal;
  }
  @keyframes wordsLoop {
    0% {
      transform: translateY(200px);
      -webkit-transform: translateY(200px);
    }
    100% {
      transform: translateY(-100%);
      -webkit-transform: translateY(-100%);
    }
  }
  @-webkit-keyframes wordsLoop {
    0% {
      transform: translateX(200px);
      -webkit-transform: translateY(200px);
    }
    100% {
      transform: translateX(-100%);
      -webkit-transform: translateY(-100%);
    }
  }
</style>
